<template>
  <div>
    <!-- 页头 -->
    <m-header
      v-if="$route.path != '/login' || $route.path != '/forgotpassword'"
    ></m-header>
    <!-- 内容 -->
    <div style="background-color: #f5f6f7;min-height:900px">
      <router-view></router-view>
    </div>
    <!-- footer页脚 -->
    <m-fotter
      v-if="
        ($route.path != '/login' || $route.path != '/forgotpassword') &&
        isFooterVisible
      "
    />
  </div>
</template>

<script>
import MHeader from "@/components/MHeader.vue";
import MFotter from "@/components/MFotter.vue";
export default {
  name: "index",
  data() {
    return {
      isFooterVisible: false, // 控制页脚是否可见
    };
  },
  mounted() {
    // 控制底部栏渲染速度
    setTimeout(() => {
      this.onViewRendered();
    }, 1000);
  },
  methods: {
    onViewRendered() {
      this.isFooterVisible = true;
    },
  },
  components: {
    MHeader,
    MFotter,
  },
};
</script>

<style scoped>
/* 定义过渡效果 */
/* .fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to  {
  opacity: 0;
} */
</style>
